<template>
  <div class="page login">
    <div class="login-box">
      <div class="login-header">
        <img src="../assets/img/logo.png">
      </div>
      <h3>Login</h3>
      <form>
        <input type="text" v-model="username" placeholder="账号" class="login-input"/>
        <p>*请填写系统发放的账号,或绑定邮箱</p>
        <input type="password" v-model="password" placeholder="密码" class="login-input"/>
        <p><input type="checkbox" v-model="remeberName" style="margin:0 0.04rem;height:0.12rem;border: 0.01rem solid #93a6d2;"/><span style="margin-left:0.04rem;color:#93A6D2;">记住用户名</span></p>
      </form>
      <div class="login-btn" @click="login">
        Login
      </div>
    </div>
  </div>
</template>

<script>
import { stringTime } from '../common/js/commont.js'
import MixinWL from '../store/wl/mixinsWl.js'
export default {
  mixins: [MixinWL],
  data () {
    return {
      username: '',
      password: '',
      remeberName: false
    }
  },
  methods: {
    // 接口登录....................................................................
    login () {
      if (this.username && this.password) {
        var ts = stringTime(new Date())
        var data = {
          account: this.username.trim(),
          password: this.password.trim(),
          ts
        }
        this.Login(data).then(() => {
          this.$router.push('/index')
        }).catch(e => {
          this.$message.info(e.message)
        })
      } else {
        this.$message.info('用户信息不完整')
      }
    }
  },
  created () {
    if (window.localStorage.getItem('account')) {
      if (window.localStorage.getItem('remeberName')) {
        this.remeberName = true
        this.username = window.localStorage.getItem('account')
      }
    }
  },
  watch: {
    remeberName (value) {
      this.$nextTick(() => {
        if (value) {
          window.localStorage.setItem('remeberName', 1)
        } else {
          window.localStorage.removeItem('remeberName')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login{
    width:100%;
    height:100%;
    background-image:url('../assets/img/loginBk.png');
background-repeat:no-repeat;
background-position:center;
position:relative;
    .login-box{
      box-shadow:0 0 0.02rem 0.02rem rgba(0,0,0,0.02);
        width:3.44rem;
        height:3.82rem;
        padding:0.4rem;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        background:white;
        border-radius:0.16rem;
        .login-header{
            height:0.36rem;
            margin-bottom:0.12rem;
           img{
                width:auto;
                height:100%;
           }
        }
        h3{
            color:#405891;
            height:0.48rem;
            font-size:0.24rem;
            line-height:0.48rem;
            margin-bottom:0.16rem;
        }
        form  .login-input{
            width:2.64rem;
            height:0.34rem;
            border: 0.01rem solid #93a6d2;
            border-radius: 0.04rem;
            outline:none;
            padding:0 0.05rem;
        }
        input{
          color:black;
        }
        input::placeholder{
                  color:#93a6d2;
                  font-weight:600;
              }
        p{
            color:#93A6D2;
            font-size: 0.12rem;
            line-height:0.24rem;
            margin:0.04rem;
            display:flex;
            flex-direction:clomun;
            align-items:center;
        }
        .login-btn{
            width:2.64rem;
            height:0.4rem;
            background:#437EDE;
            border-radius: 0.04rem;
            margin-top:0.16rem;
            text-align:center;
            line-height:0.4rem;
            font-size:0.16rem;
        }
    }
}
</style>
